<template>
  <div class="app-nav-menu">
    <ul class="nav">
        <li @click="select(item.name)" v-for="item in menus" :key="item.id">
            <span>{{item.text}}</span>
        </li>
    </ul>
  </div>
</template>

<script lang="ts">
import {
  Vue,
  Component,
  Prop,
  Model,
  Emit,
  Watch,
  Provide,
} from "vue-property-decorator";

import AuthService from "@/authservice/auth-service";
import { Subject, Subscription } from "rxjs";
import './app-nav-menu.less';
@Component({})
export default class AppNavMenu extends Vue {

    /**
     * 视图通讯对象
     *
     * @type {Subject<ViewState>}
     * @memberof AppNavMenu
     */
    @Prop() public viewState!: Subject<ViewState>;

    /**
     * 视图状态事件
     *
     * @public
     * @type {(Subscription | undefined)}
     * @memberof AppNavMenu
     */
    public viewStateEvent: Subscription | undefined;

    /**
     * 菜单数据
     *
     * @public
     * @type {any[]}
     * @memberof AppNavMenu
     */
    @Provide()
    public menus: any[] = [];

    /**
     * 名称
     *
     * @type {string}
     * @memberof AppNavMenu
     */
    @Prop() public name?: string;

    /**
     * 默认打开的index数组
     *
     * @type {any[]}
     * @memberof AppNavMenu
     */
    @Provide() public defaultOpeneds: any[] = [];

    /**
     * 建构权限服务对象
     *
     * @type {AuthService}
     * @memberof AppNavMenu
     */
    public authService: AuthService = new AuthService({ $store: this.$store });

    /**
     * 通过统一资源标识计算菜单
     *
     * @param {*} data
     * @memberof AppNavMenu
     */
    public handleMenusResource(inputMenus: Array<any>) {
        if (this.$store.getters["authresource/getEnablePermissionValid"]) {
        this.computedEffectiveMenus(inputMenus);
        this.computeParentMenus(inputMenus);
        }
        this.dataProcess(inputMenus);
        this.menus = inputMenus;
        if(Object.is(this.$route.fullPath,"/index")){
            //打开默认菜单项
            if(this.defaultOpeneds && this.defaultOpeneds.length > 0){
                this.select(this.defaultOpeneds[0], []);
            }
        }
    }

    /**
     * 执行created后的逻辑
     *
     *  @memberof AppNavMenu
     */
    public afterCreated() {
        if (this.viewState) {
        this.viewStateEvent = this.viewState.subscribe(
            ({ tag, action, data }) => {
            if (!Object.is(tag, this.name)) {
                return;
            }
            this.load(data);
            }
        );
        }
    }

    /**
     * vue  生命周期
     *
     * @memberof AppNavMenu
     */
    public created() {
        this.afterCreated();
    }

    /**
     * vue 生命周期
     *
     * @memberof AppNavMenu
     */
    public destroyed() {
        this.afterDestroy();
    }

        /**
     * 执行destroyed后的逻辑
     *
     * @memberof AppNavMenu
     */
    public afterDestroy() {
        if (this.viewStateEvent) {
            this.viewStateEvent.unsubscribe();
        }
    }
        /**
     * 菜单项集合
     *
     * @public
     * @type {any[]}
     * @memberof IndexModel
     */
    public items: any[] = [
        {
	id: 'EC656897-BD3A-4FF7-8DCD-7A35D6AEF3EF',
	name: 'menuitem2',
	text: '项目',
	type: 'MENUITEM',
	counterid: '',
	tooltip: '项目',
	expanded: true,
	separator: false,
	hidden: false,
	hidesidebar: false,
	opendefault: true,
	iconcls: '',
	icon: '',
	textcls: '',
	appfunctag: 'AppFunc',
	resourcetag: '',
	authtag:'web-Index-menuitem2',
},
        {
	id: '96BCB97D-245F-46A4-BBB7-1ACDF4664651',
	name: 'menuitem1',
	text: '我的任务',
	type: 'MENUITEM',
	counterid: '',
	tooltip: '我的任务',
	expanded: false,
	separator: false,
	hidden: false,
	hidesidebar: false,
	opendefault: false,
	iconcls: '',
	icon: '',
	textcls: '',
	appfunctag: 'AppFunc5',
	resourcetag: '',
	authtag:'web-Index-menuitem1',
}
    ]

    /**
     * 数据加载
     *
     * @param {*} data
     * @memberof AppNavMenu
     */
    public load(data: any) {
        this.handleMenusResource(this.items);
    }

    /**
     * 计算有效菜单项
     *
     * @param {*} inputMenus
     * @memberof AppNavMenu
     */
    public computedEffectiveMenus(inputMenus: Array<any>) {
        inputMenus.forEach((_item: any) => {
        if (!this.authService.getMenusPermission(_item)) {
            _item.hidden = true;
            if (_item.items && _item.items.length > 0) {
            this.computedEffectiveMenus(_item.items);
            }
        }
        });
    }

    /**
     * 数据处理
     *
     * @public
     * @param {any[]} items
     * @memberof AppNavMenu
     */
    public dataProcess(items: any[]): void {
        items.forEach((_item: any) => {
        if (_item.expanded) {
            this.defaultOpeneds.push(_item.name);
        }
        if (_item.items && _item.items.length > 0) {
            this.dataProcess(_item.items);
        }
        });
    }


    /**
     * 菜单项选中处理
     *
     * @param {*} index
     * @param {any[]} indexs
     * @returns
     * @memberof AppNavMenu
     */
    public select(index: any, indexs: any[]) {
        let item = this.compute(this.menus, index);
        if (Object.keys(item).length === 0) {
            return;
        }
        this.click(item);
    }
    /**
     * 获取菜单项数据
     *
     * @public
     * @param {any[]} items
     * @param {string} name
     * @returns
     * @memberof AppNavMenu
     */
    public compute(items: any[], name: string) {
        const item: any = {};
        items.some((_item: any) => {
            if (name && Object.is(_item.name, name)) {
                Object.assign(item, _item);
                return true;
            }
            if (_item.items && Array.isArray(_item.items)) {
                const subItem = this.compute(_item.items, name);
                if (Object.keys(subItem).length > 0) {
                    Object.assign(item, subItem);
                    return true;
                }
            }
            return false;
        });
        return item;
    }

    /**
     * 菜单点击
     *
     * @public
     * @param {*} item 菜单数据
     * @memberof AppNavMenu
     */
    public click(item: any) {
        if (item) {
            switch (item.appfunctag) {
                case 'AppFunc3': 
                    this.clickAppFunc3(item);
                    return;
                case 'AppFunc5': 
                    this.clickAppFunc5(item);
                    return;
                case 'AppFunc4': 
                    this.clickAppFunc4(item);
                    return;
                case 'AppFunc': 
                    this.clickAppFunc(item);
                    return;
                default:
                    console.warn('未指定应用功能');
            }
        }
    }

    
    /**
     * 项目看板
     *
     * @param {*} [item={}]
     * @memberof Index
     */
    public clickAppFunc3(item: any = {}) {
        const viewparam: any = {};
        Object.assign(viewparam, {});
        const deResParameters: any[] = [];
        const parameters: any[] = [
            { pathName: 'projects', parameterName: 'project' },
            { pathName: 'dashboardview', parameterName: 'dashboardview' },
        ];
        const path: string = this.$viewTool.buildUpRoutePath(this.$route, {}, deResParameters, parameters, [], viewparam);
        if(Object.is(this.$route.fullPath,path)){
            return;
        }
        this.$nextTick(function(){
            this.$router.push(path);
        })
    }
    
    /**
     * 我的任务
     *
     * @param {*} [item={}]
     * @memberof Index
     */
    public clickAppFunc5(item: any = {}) {
        const viewparam: any = {};
        Object.assign(viewparam, {});
        const deResParameters: any[] = [];
        const parameters: any[] = [
            { pathName: 'tasks', parameterName: 'task' },
            { pathName: 'dashboardview', parameterName: 'dashboardview' },
        ];
        const path: string = this.$viewTool.buildUpRoutePath(this.$route, {}, deResParameters, parameters, [], viewparam);
        if(Object.is(this.$route.fullPath,path)){
            return;
        }
        this.$nextTick(function(){
            this.$router.push(path);
        })
    }
    
    /**
     * 项目信息
     *
     * @param {*} [item={}]
     * @memberof Index
     */
    public clickAppFunc4(item: any = {}) {
        const viewparam: any = {};
        Object.assign(viewparam, {});
        const deResParameters: any[] = [];
        const parameters: any[] = [
            { pathName: 'projects', parameterName: 'project' },
            { pathName: 'infodashboardview', parameterName: 'infodashboardview' },
        ];
        const path: string = this.$viewTool.buildUpRoutePath(this.$route, {}, deResParameters, parameters, [], viewparam);
        if(Object.is(this.$route.fullPath,path)){
            return;
        }
        this.$nextTick(function(){
            this.$router.push(path);
        })
    }
    
    /**
     * 项目
     *
     * @param {*} [item={}]
     * @memberof Index
     */
    public clickAppFunc(item: any = {}) {
        const viewparam: any = {};
        Object.assign(viewparam, {});
        const deResParameters: any[] = [];
        const parameters: any[] = [
            { pathName: 'projects', parameterName: 'project' },
            { pathName: 'listview', parameterName: 'listview' },
        ];
        const path: string = this.$viewTool.buildUpRoutePath(this.$route, {}, deResParameters, parameters, [], viewparam);
        if(Object.is(this.$route.fullPath,path)){
            return;
        }
        this.$nextTick(function(){
            this.$router.push(path);
        })
    }
    
    /**
     * 计算父项菜单项是否隐藏
     *
     * @param {*} inputMenus
     * @memberof AppNavMenu
     */
    public computeParentMenus(inputMenus: Array<any>) {
        if (inputMenus && inputMenus.length > 0) {
        inputMenus.forEach((item: any) => {
            if (item.hidden && item.items && item.items.length > 0) {
            item.items.map((singleItem: any) => {
                if (!singleItem.hidden) {
                item.hidden = false;
                }
                if (singleItem.items && singleItem.items.length > 0) {
                this.computeParentMenus(singleItem.items);
                }
            });
            }
        });
        }
    }

}
</script>